<template>
	<view class="main-box">
		<view class="tips">
			<view class="icon-success">i</view>
			<text>为了保护您的合法权益，请实名认证。所有数据经过平台严格加密，保证您的信息安全！</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 新手机号输入框 -->
			<view class="form-item">
				<view class="form-label">新手机号</view>
				<view class="form-input-wrap">
					<input class="form-input" type="number" maxlength="11" placeholder="请输入新手机号" v-model="formData.newMobile" />
				</view>
			</view>

			<!-- 验证码输入框 -->
			<view class="form-item">
				<view class="form-label">验证码</view>
				<view class="form-input-wrap">
					<input class="form-input" type="number" maxlength="6" placeholder="请输入验证码" v-model="formData.verifyCode" />
					<view class="verify-code-btn" :class="{ 'disabled': countdown > 0 }" @click="getVerifyCode">
						{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
					</view>
				</view>
			</view>
		</view>

		<!-- 重要提示信息 -->
		<view class="important-notice">
			<view class="notice-title">重要提示</view>
			<view class="notice-item">• 更换手机号后，新手机号将作为登录账号</view>
			<view class="notice-item">• 更换手机号不会影响账号内的数据</view>
			<view class="notice-item">• 更换成功后，系统将自动退出登录</view>
		</view>

		<button class="submit-btn" :class="[isFormValid?'':'is-diabled']" @click="()=>{isFormValid?submitForm():()=>{};}">确认修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					newMobile: '',
					verifyCode: '',
					smsToken: '',
				},
				countdown: 0, // 验证码倒计时
				timer: null, // 定时器
			}
		},
		computed: {
			// 判断表单是否有效
			isFormValid() {
				return /^1[3-9]\d{9}$/.test(this.formData.newMobile) && this.formData.verifyCode.length === 6;
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.clearCountdownTimer();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 获取验证码
			getVerifyCode() {
				// 检查手机号
				if (!/^1[3-9]\d{9}$/.test(this.formData.newMobile)) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					});
					return;
				}

				// 如果倒计时大于0，不处理
				if (this.countdown > 0) {
					return;
				}

				// 发送请求
				this.$request.getSmsCode({
					mobile: this.formData.newMobile,
					scenario: "5" // 1员工注册登录 2渠道注册登录 3发薪确认 4变更员工手机号 5变更渠道手机号
				}, (res) => {
					this.formData.smsToken = res.sms_token;
					// 提示成功
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});

					// 开始倒计时
					this.startCountdown();
				});
			},

			// 开始倒计时
			startCountdown() {
				this.countdown = 60;
				this.clearCountdownTimer(); // 先清除可能存在的定时器

				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.clearCountdownTimer();
					}
				}, 1000);
			},

			// 清除倒计时定时器
			clearCountdownTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},

			// 提交表单
			submitForm() {
				// 再次验证表单
				if (!this.isFormValid) {
					return;
				}

				const {
					newMobile,
					verifyCode
				} = this.formData;

				// 显示加载中提示
				uni.showLoading({
					title: '提交中...',
					mask: true
				});

				// 调用更换手机号接口
				this.$request.changeMobile({
					new_mobile: newMobile,
					new_verify_code: verifyCode,
					sms_token: this.formData.smsToken,
				}, (res) => {
					// 修改成功
					uni.showToast({
						title: '手机号更换成功',
						icon: 'success'
					});

					// 保存新的手机号到本地缓存
					try {
						const channelInfo = uni.getStorageSync('channelInfo') || {};
						channelInfo.mobile = newMobile;
						uni.setStorageSync('channelInfo', channelInfo);
					} catch (e) {
						// 忽略错误
					}

					// 延迟后自动退出登录
					setTimeout(() => {
						// 清除登录信息
						uni.clearStorageSync();

						// 跳转到登录页面
						uni.reLaunch({
							url: '/pages/login'
						});
					}, 1500);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 引入sass样式变量(本来想全局引入，但是不成功，以后有空再解决)
	@import '@/static/scss/variables.scss';

	/* 提示信息区域 */
	.tips {
		display: flex;
		padding: 3vw;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 3vw;
		font-size: $minFontSize;

		.icon-success {
			width: 35rpx;
			min-width: 35rpx;
			height: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $colorPrimary;
			color: white;
			border-radius: 50%;
			margin-right: 15rpx;
			font-size: $minFontSize;
			margin-top: 1px;
		}

		text {}
	}

	.navbar-left {
		width: 80rpx;
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #333;
	}

	.navbar-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.navbar-right {
		width: 80rpx;
	}

	/* 表单容器 */
	.form-container {
		padding: 3vw;
		border-radius: 3vw;
		background-color: white;
	}

	/* 步骤提示 */
	.step-tips {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: #f0f8ff;
		border-radius: 8rpx;
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.form-input-wrap {
		display: flex;
		align-items: center;
		height: 88rpx;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 0 24rpx;
		border: 1rpx solid #e0e0e0;
	}

	.form-input {
		flex: 1;
		height: 88rpx;
		font-size: 28rpx;
		color: #333;
	}

	.verify-code-btn {
		min-width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: $colorPrimary;
		color: #fff;
		font-size: 24rpx;
		border-radius: 30rpx;
		margin-right: -1vw;
	}

	.verify-code-btn.disabled {
		background-color: #cccccc;
	}

	/* 重要提示 */
	.important-notice {
		margin-top: 3vw;
		padding: 3vw;
		background-color: $colorPrimaryLight3;
		border-radius: 8rpx;
	}

	.notice-title {
		font-size: 28rpx;
		font-weight: 500;
		color: $colorPrimary;
		margin-bottom: 2vw;
	}

	.notice-item {
		font-size: 24rpx;
		color: $colorPrimary;
		margin-bottom: 10rpx;
		line-height: 1.6;
	}
</style>